<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <el-form :rules="rules" status-icon :model="form" ref="form" label-width="100px">
      <el-form-item label="登录名称" prop="pass" style="width: 40%">
        <el-input :disabled="true" :placeholder="this.$store.state.user.userinfo.username"></el-input>
        <!-- <p>{{ this.$store.state.user.userinfo.id }}</p> -->
      </el-form-item>
      <el-form-item prop="nickname" label="用户昵称" style="width: 40%">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item prop="emil" label="用户邮箱" style="width: 40%">
        <el-input v-model="form.emil"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">注册</el-button>
      </el-form-item>
      <el-link @click="$router.push('/login')">去登录</el-link>
    </el-form>
  </el-card>
</template>

<script>
import { updataUserInfoAPI } from '../axios/api.js'
export default {
  data() {
    return {
      form: {
        id: Number(this.$store.state.user.userinfo.id),
        nickname: '李建雨',
        emil: '578438987@qq.com'
      },
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 10, message: '非空字符串、长度 1-10', trigger: 'blur' }
        ],
        emil: [
          { required: true, message: '请设置邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确邮箱格式', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    onSubmit(form) {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 发送axios请求
          console.log(form)
          const { data: res } = await updataUserInfoAPI(form)
          if (res.code === 0) {
            // 注册成功
            // 显示成功信息
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
            // 把用户名存上
            // this.$store.commit('user/updataUsername', this.form.username)
            // 跳转到登陆页面
            // this.$router.push('/login')
          } else {
            // 注册出现其他问题
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
          console.log(res)
          // 表单完整性通过
        } else {
          this.$message({
            showClose: true,
            message: '请正确填写信息',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
